<template>
  <div>
    <h1>Prediction Result</h1>
    <p>{{ result }}</p>
    <h2>Health Advice</h2>
    <div v-if="Object.keys(parsedAdvice).length > 0">
      <ul>
        <li v-for="(value, key) in parsedAdvice" :key="key">{{value}}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const result = computed(() => route.query.result);
const adviceParam = computed(() => route.query.advice);
const parsedAdvice = computed(() => {
  let adviceValue = adviceParam.value;
  if (Array.isArray(adviceValue)) {
    adviceValue = adviceValue[0];
  } else if (typeof adviceValue !== 'string') {
    console.error('Unexpected adviceParam type:', typeof adviceValue);
    return {};
  }

  try {
    return JSON.parse(adviceValue);
  } catch (error) {
    console.error('Failed to parse advice:', error);
    return {};
  }
});
</script>
